<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			svg{stroke: black;fill: none;width:400px;height:500px;border:1px dashed black;}
		</style>
	</head>
	<body>
		<svg>
			<defs>
				<pattern id="one" x="0" y="0" width="20%" height='20%' patternUnits="objectBoundingBox">
					<path d="M0 0Q5 20 10 10T20 20" style="stroke: black;fill: none;"></path>
					
					<path d="M0 0h20v20h-20z" style="stroke:gray;fill:none"></path>
				</pattern>
				<pattern id="two" patternTransform="skewY(15)" xlink:href="#one"></pattern>
				<lineargradient id="three">
					<stop offset="0%" style="stop-color: #ffcc00;"></stop>
					<stop offset="33.3%" style="stop-color: #cc6699;"></stop>
					<stop offset="100%" style="stop-color: #66cc99;"></stop>
				</lineargradient>
				<lineargradient id="four" gradientTransform="skew(10)" xlink:href="#three"></lineargradient>
				
			</defs>
			
			<rect x="20" y="10" width="100" height="100" style="fill: url(#one);stroke:black;"></rect>
			<rect x="135" y="10" width="100" height="100" style="fill: url(#two);stroke:black;"></rect>
			<rect x="20" y="120" width="200" height="50" style="fill: url(#three);stroke:black;"></rect>
			<rect x="20" y="190" width="200" height="50" style="fill: url(#four);stroke:black;"></rect>
		</svg>
	</body>
</html>
